<!-- 专业 -->
<template>
	<view class="subjectPage">
		<view class="contents">
			<view class="searchs flex">
				<view class="search-item font12" @click="handleSearch(2)" :class="searchTexts[0]!='学院'?'select-item font14':''">
					{{searchTexts[0]}} 
					<uni-icons class="icons" type="bottom" size="14" :color="searchTexts[0]!='学院'?'#F7DD5E':'#aaa'"  @click.stop="handleSearch(2)"></uni-icons> 
				</view>
				<view class="search-item font12" @click="handleSearch(1)" :class="searchTexts[1]!='学科'?'select-item font14':''">
					{{searchTexts[1]}} 
					<uni-icons class="icons" type="bottom" size="14" :color="searchTexts[1]!='学科'?'#F7DD5E':'#aaa'"  @click.stop="handleSearch(1)"></uni-icons> 
				</view>
				<view class="search-item font12" @click="handleSearch(3)" :class="searchTexts[2]!='星级'?'select-item font14':''">
					{{searchTexts[2]}}
					<uni-icons class="icons" type="bottom" size="14" :color="searchTexts[2]!='星级'?'#F7DD5E':'#aaa'"  @click.stop="handleSearch(3)"></uni-icons> 
				</view>
			</view>
			<view class="tableBox">
				<wyb-table ref="table" :headers="headers" :url-col="urlCol"  :contents="tableData" :height="tableHeight"  link-color="#FDE080" width="100%" />
			</view>
		</view>
		<u-popup mode="bottom" v-model="subjectPopup">
			<view class="subjectPopup">
				<view class="btns flex font14">
					<view class="cancel" @click="handleCancel">取消</view>
					<view class="sure" @click="handleSure">确认</view>
				</view>
				<view class="popup-box">
					<view class="item-box" v-if="searchType == 1">
						<view v-for="(item,index) in subjectCodeOptions" :key="index" class="item" :class="(chooseIndex===0||chooseIndex)?(index==chooseIndex?'iemChoose bold':''):(item.subjectCode == searchParam.subjectCode?'iemChoose bold':'')" @click="chooseIndex=index">
							{{item.title}}
						</view>
					</view>
					<view class="item-box" v-if="searchType == 2">
						<view v-for="(item,index) in schoolCodeOptions" :key="index" class="item" :class="(chooseIndex===0||chooseIndex)?(index==chooseIndex?'iemChoose bold':''):(item.collegeCode == searchParam.collegeCode?'iemChoose bold':'')" @click="chooseIndex=index">
							{{item.title}}
						</view>
					</view>
					
					<view class="item-box" v-if="searchType == 3">
						<view v-for="(item,index) in starOptions" :key="index" class="item" :class="(chooseIndex===0||chooseIndex)?(index==chooseIndex?'iemChoose bold':''):(item.dictValue == searchParam.star?'iemChoose bold':'')" @click="chooseIndex=index">
							{{item.dictLabel}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { majorDistributionList,colleageData,selectList,getSubjectSelect} from '@/api/toolbox.js';
	import wybTable from '@/pages/toolbox/components/wyb-table/wyb-table.vue'
	export default {
		components: {
			wybTable,
		},
		data() {
			return {
				subjectPopup:false,
				total: 0,
				tableHeight: '500px',
				searchParam: {
					collegeCode: "",
					major: "",
					pageNum: 1,
					pageSize: 50,
					reasonable: true,
					schoolCode: "",
					star: "",
					subjectCode: "",
					year: new Date().getFullYear()
				},
				searchTexts:['学院','学科','星级'],
				chooseIndex: '',
				searchType: 1,//1、学科，2、学院，3、星级
				schoolCodeOptions: [],//学院
				subjectCodeOptions: [],//学科
				starOptions: [],//星级
				urlCol: [{
					type: 'route',
					key: 'majorName'
				}],
				tableData: [],
				headers: [
					{
						label: '专业',
						key: 'majorName',
						width: 170
					},
					{
						label: '星级',
						key: 'majorStar',
						// width: 100
					},
					{
						label: '门类',
						key: 'subjectName',
						// width: 100
					},
					{
						label: '一级学科',
						key: 'subjectOneName',
						// width: 140
					},
					{
						label: '学院',
						key: 'collegeName',
						// width: 110
					},
				]
			}
		},
		created() {
			this.searchParam.schoolCode = uni.getStorageSync('schoolCode');
			this.getSelectInit();
			const { windowHeight } = uni.getSystemInfoSync(); // 获取页面高度
			this.tableHeight = windowHeight-100+'px';
		},
		
		methods: {			
			getSelectInit(){
				var info = {
				  pageNum: 1,
				  pageSize: 100,
				  reasonable: true,
				  schoolCode: this.searchParam.schoolCode,
				  year: this.searchParam.year
				};
				//获取学院
				colleageData(info).then(res=>{
					// console.log(res)
					this.schoolCodeOptions = res.data.rows;
					this.schoolCodeOptions.unshift({title: '全部',collegeCode: ''});
				});
			
				//获取专业星级
				selectList('major_star').then(res => {
					this.starOptions = res.rows;
					this.starOptions.unshift({dictLabel: '全部',dictValue: ''});
				});
				
				this.getSubject();
			},
			getSubject(){
				//获取学科
				var selectInfo = {
					schoolCode: this.searchParam.schoolCode,
					year: this.searchParam.year,
					collegeCode: this.searchParam.collegeCode
				};
			
				getSubjectSelect(selectInfo).then((ressub) => {
					// console.log(111111111,ressub);
					// if(){}
					if(ressub.code == 100000){
						this.subjectCodeOptions = ressub.data;
						this.subjectCodeOptions.unshift({title: '全部',subjectCode: ''});
					}
					
				});
			},
			/**
			 * 搜索
			 * @param {Object} type 1、学科，2、学院，3、专业星级
			 */
			handleSearch(type){
				this.searchType = type;
				this.chooseIndex = '';
				this.subjectPopup = true;
			},
			getData(){
				majorDistributionList(this.searchParam).then(res=>{
					if(res.code === 100000){
						res.data.rows.forEach((item)=>{
							let items = {
								"collegeCode": item.collegeCode, //"023"
								"majorCode": item.majorCode, //"010101"
								"schoolCode": item.schoolCode, //"10001"
							};
							item.majorName = [item.majorName,'/pages/toolbox/chooseMajor/major/majorDetail?items='+JSON.stringify(items)];
						})
						if(this.searchParam.pageNum ==1){
							this.tableData = res.data.rows;
							this.total = res.data.total;
							return
						}
						this.tableData.push.apply(this.tableData,res.data.rows);
					}
				})
			},
			
			handleCancel(){
				this.chooseIndex = '';
				this.subjectPopup = false;
			},
			handleSure(){
				this.searchParam.pageNum = 1;
				if(this.searchType == 1){
					this.searchTexts[1] = this.subjectCodeOptions[this.chooseIndex].title;
					if(this.chooseIndex == 0){
						this.searchTexts[1] = '学科';
					}
					this.searchParam.subjectCode = this.subjectCodeOptions[this.chooseIndex].subjectCode;
				}
				if(this.searchType == 2){
					this.searchTexts[0] = this.schoolCodeOptions[this.chooseIndex].title;
					if(this.chooseIndex == 0){
						this.searchTexts[0] = '学院';
					}
					this.searchParam.collegeCode = this.schoolCodeOptions[this.chooseIndex].collegeCode;
					
					// 选择的学院发生改变,学科跟着学院变
					this.searchTexts[1] = '学科';
					this.searchParam.subjectCode = '';
					this.getSubject();
				}
				if(this.searchType == 3){
					this.searchTexts[2] = this.starOptions[this.chooseIndex].dictLabel;
					if(this.chooseIndex == 0){
						this.searchTexts[2] = '星级';
					}
					this.searchParam.star = this.starOptions[this.chooseIndex].dictValue;
				}
				this.subjectPopup = false;
				this.getData();
			},
			//底部刷新
			onReachBottom() {
				// console.log(111111111);
				if(this.tableData.length>=this.total) return;
				this.searchParam.pageNum++;
				this.getData();
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.subjectPage{
		padding-bottom: 20rpx;
	}
	.searchs{
		align-items: center;
		justify-content: center;
		height: 80rpx;
		.search-item{
			color: #aaaaaa;
			width: 200rpx;
			text-align: center;
			margin-right: 20rpx;
			// justify-content: space-between;
			.icons{
				position: absolute;
				margin-left: 30rpx;
				// margin-left: 10rpx;
			}
		}
		.select-item{
			color: #F7DD5E;
		}
	}
	.tableBox{
		margin: 0 20rpx;
	}
	
	.subjectPopup{
		background: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		height: 560rpx;
		padding: 30rpx;
		.btns{
			align-items: center;
			justify-content: space-between;
			// height: 60rpx;
			margin: 4rpx 0 20rpx 0;
			.cancel{
				color: #aaaaaa;
			}
			.sure{
				color: #FDE080;
			}
			
		}
		.popup-box{
			text-align: center;
			overflow-x: hidden;
			height: 500rpx;
			.item-box{
				
			}
			.item{
				line-height: 70rpx;
			}
			
			.iemChoose{
				background-color: rgba(253,224,128,0.3);
				color: #333;
			}
		}
		
		
	}
</style>